<!-- Main Content -->
<div class="main-content">
    <section class="section">

        <div class="section-body">

            <div class="card">
            <div class="card-body">

                <div class="row">
                    <div class="col">

                        <ul class="nav nav-tabs nav-overflow header-tabs">
                            <li class="nav-item">
                                <a class="py-3 nav-link active" href="#" data-toggle="tab" data-target="#tab_mysql" aria-expanded="true">
                                    <span class="text-md">{i18n{ manager.database_RelationDatabase }i18n}</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="py-3 nav-link" href="#" data-toggle="tab" data-target="#tab_redis" aria-expanded="false">
                                    <span class="text-md">{i18n{ manager.database_RedisDatabase }i18n}</span>
                                </a>
                            </li>
                        </ul>

                    </div>

                    <div class="col-6 col-lg-2 text-right">

                        <button class="btn btn-outline-dark" type="button" onclick="MANAGER.postFormToAction('manager/refreshRedis',{});">
                            {i18n{ manager.clearRedis }i18n}
                        </button>

                    </div>


                    <div class="col-12">
                        <div class="tab-content">

                        <div class="tab-pane table-responsive active mb-0" id="tab_mysql" data-toggle="lists" data-options='{"valueNames": ["goal-rows", "goal-length", "goal-size","goal-indexSize","goal-createTime","goal-lastTime"]}'>
                            <table class="table table-sm table-nowrap card-table table-striped" >
                                <thead>
                                <tr>
                                    <th>
                                        {i18n{ manager.database_Table }i18n}
                                    </th>
                                    <th>
                                        {i18n{ manager.database_Title }i18n}
                                    </th>
                                    <th>
                                        <a href="#" class="text-muted sort" data-sort="goal-rows">
                                            {i18n{ manager.database_Rows }i18n}
                                        </a>
                                    </th>
                                    <th>
                                        <a href="#" class="text-muted sort" data-sort="goal-length">
                                            {i18n{ manager.database_AvgLength }i18n}
                                        </a>
                                    </th>
                                    <th>
                                        <a href="#" class="text-muted sort" data-sort="goal-size">
                                            {i18n{ manager.database_Size }i18n}
                                        </a>
                                    </th>
                                    <th>
                                        <a href="#" class="text-muted sort" data-sort="goal-indexSize">
                                            {i18n{ manager.database_IndexSize }i18n}
                                        </a>
                                    </th>
                                    <th>
                                        <a href="#" class="text-muted sort" data-sort="goal-createTime">
                                            {i18n{ manager.database_CreateTime }i18n}
                                        </a>
                                    </th>
                                    <th>
                                        <a href="#" class="text-muted sort" data-sort="goal-lastTime">
                                            {i18n{ manager.database_LastTime }i18n}
                                        </a>
                                    </th>

                                    <th>

                                    </th>
                                </tr>
                                </thead>
                                <tbody class="list">
                                ||loop??databases??
                                <tr>
                                    <td class="p-2">
                                        <a class="font-weight-bold a-text-l" href="detail?table={{TABLE_NAME}}&comment={{TABLE_COMMENT}}" >
                                            {{TABLE_NAME}}
                                        </a>
                                    </td>
                                    <td class="p-2">{{TABLE_COMMENT}}</td>
                                    <td class="p-2 goal-rows">{{TABLE_ROWS}}</td>
                                    <td class="p-2 goal-length">{{AVG_ROW_LENGTH}}</td>
                                    <td class="p-2 goal-size">{{DATA_LENGTH}}</td>
                                    <td class="p-2 goal-indexSize">{{INDEX_LENGTH}}</td>
                                    <td class="p-2 goal-createTime">{{CREATE_TIME}}</td>
                                    <td class="p-2 goal-lastTime">{{UPDATE_TIME}}</td>
                                    <td class="p-2 text-right">
                                        <div class="dropdown">
                                            <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fe fe-more-vertical"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#!" class="dropdown-item">
                                                    Action
                                                </a>
                                                <a href="#!" class="dropdown-item">
                                                    Another action
                                                </a>
                                                <a href="#!" class="dropdown-item">
                                                    Something else here
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                loop||
                                </tbody>
                            </table>
                        </div>


                        <div class="tab-pane table-responsive mb-0" id="tab_redis">
                            <table class="table table-sm table-nowrap card-table table-striped">

                                <thead>
                                    <th>{i18n{ manager.database_Title }i18n}</th>
                                    <th>{i18n{ manager.database_Value }i18n}</th>
                                </thead>

                                <tbody>
                                ||loop??redis??
                                <tr>
                                    <td class="py-2">{i18n{ redis.{{key}} }i18n}</td>
                                    <td class="py-2">{{value.value}}</td>
                                </tr>
                                loop||
                                </tbody>

                            </table>
                        </div>


                    </div>

                    </div>
                </div>
            </div>
        </div> <!-- / .row -->
    </div>
    </section>
</div>